<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css"
	href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript"
	src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<script type="text/javascript">
Ext.onReady(function(){
	// Ext.Container的layout，有Ext.layout.AutoLayout等等
	// layout：默认从上到下排
	// column从左到右，columnWidth百分比
	var panel = new Ext.Panel({
		width: 600,
		height: 200,
		title: "父面板",
		layout: "column",
		items: [
			{title: "面板1", columnWidth: .25, height:50},
			{title: "面板2", columnWidth: .25, height:50},
			{title: "面板3", width: 50, height:50},
			{title: "面板4", columnWidth: 1, height:150, layout: "column", items: [
				{title: "面板5", columnWidth: .25, height:50},
				{title: "面板6", columnWidth: .25, height:50}
			]}
		]
	});
	panel.render("d1");

	// border布局：盒式东西南北中，最多5个元素，一定要指定region，一定要有center
	// 盒式布局里面的嵌套最好还是盒式的，这样自动拉伸
	// split拉动，collapsible缩进
	var panel1 = new Ext.Panel({
		width: 600,
		height: 200,
		title: "父面板",
		layout: "border",
		items: [
			{title: "西", region: "west", width: 50, split: true, collapsible: true},
			{title: "东", region: "east", width: 50},
			{title: "中", region: "center"},
			{title: "北", region: "north", height: 50},
			{title: "南", region: "south", height: 50},
		]
	});
	panel1.render("d2");

	// fit布局：子元素填充满父容器，只能看见一个元素
	var panel2 = new Ext.Panel({
		width: 600,
		height: 200,
		title: "父面板",
		layout: "fit",
		items: [
			{title: "子面板"}
		]
	});
	panel2.render("d3");

	// accordion布局：层叠展开
	// fit布局：子元素填充满父容器，只能看见一个元素
	var panel3 = new Ext.Panel({
		width: 600,
		height: 300,
		title: "父面板",
		layout: "accordion",
		items: [
			{title: "子面板1"},
			{title: "子面板2"}
		]
	});
	panel3.render("d4");

	// card布局：fit布局的扩展

	// anchor布局：根据父容器的高宽设置
	var panel4 = new Ext.Panel({
		width: 600,
		height: 200,
		title: "父面板",
		layout: "anchor",
		items: [
			{title: "子面板1", anchor: "50% 30%"},
			{title: "子面板2", anchor: "-50 30%"}
		]
	});
	panel4.render("d5");

	// form布局
	var panel5 = new Ext.Panel({
		width: 600,
		height: 200,
		title: "父面板",
		layout: "form",
		items: [
		   	{layout: "column", border: false, items:[
		   	    {layout: "form", border: false, items: [
		   	    	{xtype: "textfield", fieldLabel: "姓名", name: "name"},
					{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "pwd"}
		   	    ]},
		   	 	{layout: "form", border: false, items: [
		   	    	{xtype: "textfield", fieldLabel: "姓名", name: "name"},
					{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "pwd"}
		   	    ]}
		   	]},
			{xtype: "textarea", fieldLabel: "简介", name: "intro", anchor:"-20"}
		]
	});
	panel5.render("d6");

	var table = new Ext.Panel({
	    title: 'Table Layout',
	    layout:'table',
	    defaults: {
	        // applied to each contained panel
	        bodyStyle:'padding:20px'
	    },
	    layoutConfig: {
	        // The total column count must be specified here
	        columns: 3
	    },
	    items: [{
	        html: '<p>Cell A content</p>',
	        rowspan: 2
	    },{
	        html: '<p>Cell B content</p>',
	        colspan: 2
	    },{
	        html: '<p>Cell C content</p>',
	        cellCls: 'highlight'
	    },{
	        html: '<p>Cell D content</p>'
	    }]
	});
	table.render("d7");
});
</script>
</body>
</html>
